<template >
<h2>酒店</h2>

姓名：<input type="text" v-model="Chaxun.name">


<select  v-model="Chaxun.Did">
                    <option value="-1"> --请选择---</option>
                    <option v-for="item in aa" :value="item.did"> {{ item.dname }}</option>
                   </select>
                   <button @click="ShowJiu" class="btn btn-success"> 搜索</button>
<table class="table table-bordered">







<thead>
    <tr>
    <th>酒店编号</th>
    <th>酒店名称</th>
    <th>酒店地址</th>
    <th>酒店图片</th>
    <th>酒店手机号</th>
    <th>酒店状态</th>
    <th>创建时间</th>
    <th>交通</th>
    <th>政策</th>
    <th>操作</th>
    </tr>

</thead>

<tbody v-for="item in bb">

    <tr>
    <th>{{ item.jid }}</th>
    <th>{{ item.jname }}</th>
    <th>{{ item.jname }}</th>
    <th><img :src="item.jimg" style="height: 100px; width: 100px;"></th>
    <th>{{ item.phone }}</th>
    <th>{{ item.jsatic?"开业":"停业" }}</th>
    <th>{{ moment(item.stime)}}</th>
    <th>{{ item.jiaoTong }}</th>
    <th>{{ item.zhengce }}</th>
    <th><button @click="IsDel(item.jid)">删除</button></th>
    <th><a href="#"  @click="UpShow(item.jid)">修改</a></th>
    </tr>




</tbody>



</table>

共<span>{{FenYe.Count  }}</span>条
每页<span>{{FenYe.m  }}</span>条
总共<span>{{FenYe.Zy  }}/{{ FenYe.s }}</span>页
<button @click="Fenyef('S')">首页</button>
<button @click="Fenyef('E')">上一页</button>
<button @click="Fenyef('F')">下一页</button>
<button @click="Fenyef('M')">尾页</button>




</template>


<script setup lang="ts">



import  {useHotelStore} from '../Store/Hotell'

 const  hotelstore=useHotelStore();


import { onMounted } from 'vue';
import{ref}from 'vue';
import moment from 'moment';
import axios from 'axios';
import { useRouter ,createRouter } from 'vue-router';

const Fenyef=(chool:string)=>{   //页面跳转方法

        switch(chool){

                case "S":
                FenYe.value.s=1;
                break;
                case"M":
                FenYe.value.s=FenYe.value.Zy;
                break;
                case"E":

                    if(FenYe.value.s<=1)
                    {
                        alert('页码不能低于1')
                        return ;
                    }
                    FenYe.value.s-=1
                break;
            case"F":

            if(FenYe.value.s>=FenYe.value.Zy)
            {
             alert('页码不能大于最后一页')
              return ;
            }
            FenYe.value.s+=1
            break;;


          

        }
        ShowJiu();



}


onMounted(()=>{   //钩子函数
    PanDuan();
     XiaLa();
        ShowJiu();
    

})



const PanDuan=()=>{

    if(hotelstore.Mid=="")
{
    alert('请登陆')
    router.push("/AddJiuDian")
}



}

  
const bb =ref([{   //响应式对象
    "dname": "华北地区",
      "jid": 5,
      "jname": "李四",
      "did": 1,
      "jimg": "1",
      "phone": "1234",
      "jsatic": true,
      "stime": "2024-05-05T00:00:00",
      "jiaoTong": "阿斯顿",
      "zhengce": "阿斯顿",
      "isDel": true


}])


const FenYe=ref({  //分页响应式对象

s:1,
m:3,
Count:0,
Zy:0

})





const Chaxun=ref({   //下拉响应式对象

    Did:-1,
    name:"",
    

})

console.log(Chaxun)

const  ShowJiu=()=>{  //显示

    console.log(hotelstore.Mid)
    alert(hotelstore.Mid)
    axios.get('https://localhost:7240/api/User/ShowJiu',{params:{
        
        s:FenYe.value.s,
        m:FenYe.value.m,
        name:Chaxun.value.name,
        Did:Chaxun.value.Did


    }}).then(res=>{
        bb.value=res.data.data,
        FenYe.value.Count=res.data.count,
        FenYe.value.Zy=res.data.zy



    })


}





//下拉框显示
const XiaLa=()=>{   


axios.get('https://localhost:7240/api/User/ShowDi').then(res=>{

        aa.value=res.data

})

}


const aa = ref([{   //响应式数据

"did": -1,
"dname": "string"

}])


const IsDel =(id:number)=>{  //逻辑删除

    if(!confirm("确定删除吗"))
{
    return ;
}


    axios.delete('https://localhost:7240/api/User/IsDel',{params:{

        id:id,
    }}).then(res=>{

        if(res.data>0)
    {
        alert('删除成功')
        ShowJiu();
    }
    else
    {
        alert('删除失败')
    }
    })


}

const router=useRouter();
const UpShow=(id:number)=>{  //跳转到修改页面和传id

        
    router.push({

        name:'UpdateShow',
        params:{

            id:id,

        }

    })



}



</script>